<script setup>
import { ref } from 'vue'
import { RouterLink } from 'vue-router'
import router from '@/router';
const value = ref("")

// const data = ref([])

// data.value = []

const treeData = ref([
  {
    id: 1,
    label: '系统管理',
    children: [
      {
        id: 11,
        label: '用户管理',
        path:'/system/sysUser'

      },{
        id:12,
        label: '角色管理',
        path:'/system/sysRole'
      },{
        id:13,
        label:'菜单管理',
        path:'/system/sysMenu'
      },
      {
        id:14,
        label:'部门管理',
        path:'/system/sysDept'
      },
      {
        id:15,
        label:'岗位管理',
        path:'/system/sysPost'
      },{
        id:16,
        label:"日志管理",
        children:[
            {
                id:161,
                label:"操作日志",
                path:"/system/log/sysOperLog"
            },
            {
                id:162,
                label:"登录日志",
                path:'/system/log/sysLoginLog'
            }
        ]
      }
    ]
  },
  {
    id: 2,
    label: '审批设置',
    children: [
      {
        id: 21,
        label: '审批模板'
      },
      {
        id: 22,
        label: '审批类型'
      }
    ]
  },
  {
    id: 3,
    label: '审批管理',
    children: [
      {
        id: 31,
        label: '审批列表'
      }
    ]
  }
]);

const defaultProps = {
  children: 'children',
  label: 'label'
};

const handleNodeClick = (data) => {
  console.log('node clicked:', data.id);
  if(data.path!=null){
      router.push({
    path:data.path
  })
  }

};

</script>
<template>
    <el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <h3>后台管理</h3>
        <div class=“organization_configuration”>
            <el-tree  highlight-current :data="treeData" :props="defaultProps" @node-click="handleNodeClick" style="background-color:#545c64; color: #ffffff; font-size: 17px;  " :node-key="conmonaside" > </el-tree>
        </div>
        
    </el-menu>
</template>

<style lang="less">


.el-tree-node:focus>.el-tree-node__content { 
  color: #0074b7;
}

.el-tree-node__content:hover {
    background-color: #2a4056;
}


.el-menu-vertical-demo {
    width: 100%;
    border-right: none;
    .custom-tree {
  .el-tree {
    background-color: #f0f0f0;
  }
  
  /* 修改 ElTree 节点的背景颜色 */
  .el-tree-node {
    background-color: #ffffff;
  }
}
    h3 {
        color: #fff;
        text-align: center;
        margin-top: 0px;
        padding: 10px;
    }

    height: 100%;
    margin: 0,
    0;
}


</style>
